<template>
  <div class="app-container">
    <label>
      <input
        type="file"
        accept="video/*"
        ref="inputRef"
        @change="handleSelectFile"
      />
      <button @click="handleOpenSelector">选择文件</button>
    </label>
    <button class="upload" @click="handleUploadFile">上传文件</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { fileFragment } from "./utils/upload";
defineOptions({
  name: "App",
});

const inputRef = ref<HTMLInputElement | null>();

/** 打开文件选择器 */
function handleOpenSelector() {
  if (inputRef.value) {
    inputRef.value.click();
  }
}

/** 选择文件 */
async function handleSelectFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  console.log(file);
  if (file) {
    await fileFragment(file);
  }
}

async function handleUploadFile() {}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

input[type="file"] {
  display: none;
  height: 0;
}

button {
  display: inline-block;
  outline: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  padding: 8px 10px;
  color: #fff;
  background-color: #409eff;
  &.upload {
    margin-left: 10px;
  }
}
</style>
